<template>
  <nav>
    <ul class="pagination">
      <li class="page-item" :class="page === i ? 'active' : ''" v-for="i in pageCount" :key="i">
        <nuxt-link
          class="page-link"
          :to="{
            path: $route.path,
            query: {
              page: i,
              tag: $route.query.tag || undefined,
              tab: $route.query.tab || undefined,
            },
          }"
        >{{ i }}</nuxt-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "PageItem",
  props: {
    pageCount: {
      type: Number,
      required: true
    }
  },
  computed: {
    page() {
      return parseInt(this.$route.query.page) || 1;
    }
  }
};
</script>